<template>
  <div class="dialog-tool">
    <el-dialog
      :title="isAdd? '商品编辑' : '商品新增'"
      :visible="showDialog"
      width="60%"
      @close="btnCancel"
    >
      <el-collapse v-model="activeNames">
        <el-collapse-item title="商品信息" name="1">
          <el-form ref="addForm" label-width="150px" class="demo-ruleForm" :model="good">
            <el-form-item label="所属店铺" style="width:92%" prop="shop_id">
              <el-select v-model="good.shop_name" placeholder="请选择" :disabled="good.id ? true : false " @change="changeShop">
                <el-option
                  v-for="v in shop_data"
                  :key="v"
                  :label="v"
                  :value="v"
                />
              </el-select>

            </el-form-item>
            <el-form-item v-show="false" label="店铺id" style="width:92%" prop="shop_id">
              <el-input v-model="good.shop_id" />
            </el-form-item>
            <el-form-item v-show="false" label="类型名字" style="width:92%" prop="types_of">
              <el-input v-model="good.types_of" />
            </el-form-item>

            <el-form-item label="所属用户" style="width:92%" prop="user_id">
              <el-select v-model="good.user_id" placeholder="请选择" :disabled="good.id ? true : false " @change="changUser">
                <el-option
                  v-for="v in new_user"
                  :key="v.userid"
                  :label="v.username"
                  :value="v.userid"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="商品名称" style="width:92%" prop="good_name">
              <el-input v-model="good.good_name" :disabled="good.id ? true : false " />
            </el-form-item>
            <el-form-item label="类型" style="width:92%" prop="types_id">
              <el-select v-model="good.types_id" :disabled="good.id ? true : false " placeholder="请选择" @change="changClass">
                <el-option
                  v-for="v in class_data"
                  :key="v.id"
                  :label="v.cat_name"
                  :value="v.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="成本价" style="width:92%" prop="cost_prc">
              <el-input-number v-model="good.cost_prc" controls-position="right" :precision="2" :min="1" :max="999" label="描述文字" />
            </el-form-item>
            <el-form-item label="原价" style="width:92%" prop="original_prc">
              <el-input-number v-model="good.original_prc" controls-position="right" :precision="2" :min="1" :max="10" label="描述文字" />
            </el-form-item>
            <el-form-item label="库存量" style="width:92%" prop="in_stk">
              <el-input-number v-model="good.in_stk" controls-position="right" :min="1" :max="999" label="描述文字" />
            </el-form-item>
            <el-form-item label="参与活动" style="width:92%" prop="activity">
              <el-select v-model="good.activity" clearable placeholder="请选择">
                <el-option
                  v-for="v in shop_activity"
                  :key="v.id"
                  :label="v.activity_name"
                  :value="v.activity_name"
                />
              </el-select>
            </el-form-item>
            <el-form-item v-if="good.activity=== '秒杀活动'" label="账号限购" style="width:92%" prop="limit_number">
              <el-input-number v-model="good.spike.limit_number" controls-position="right" :min="1" :max="999" label="描述文字" />
            </el-form-item>
            <el-form-item v-if="good.activity=== '秒杀活动'" label="秒杀价" style="width:92%" prop="prc_spike">
              <el-input-number v-model="good.spike.prc_spike" controls-position="right" :precision="2" :min="1" :max="999" label="描述文字" />
            </el-form-item>
            <el-form-item v-if="good.activity=== '打折促销'" label="第一件优惠" style="width:92%" prop="participate">
              <el-radio v-model="good.disc_act.frst_ordr" :label="true">是</el-radio>
              <el-radio v-model="good.disc_act.frst_ordr" :label="false">否</el-radio>
            </el-form-item>
            <el-form-item v-if="good.activity=== '打折促销'" label="促销价" style="width:92%" prop="frst_ordr">
              <el-input-number v-model="good.disc_act.sale_prc" controls-position="right" :min="1" :max="999" label="描述文字" :precision="2" />
            </el-form-item>
            <el-form-item label="热销" style="width:92%" prop="hot_cakes">
              <el-radio v-model="good.hot_cakes" :label="true">是</el-radio>
              <el-radio v-model="good.hot_cakes" :label="false">否</el-radio>
            </el-form-item>
            <el-form-item label="状态" style="width:92%" prop="sts">
              <el-radio v-model="good.sts" :label="true">上架</el-radio>
              <el-radio v-model="good.sts" :label="false">下架</el-radio>
            </el-form-item>
            <el-form-item label="推荐" style="width:92%" prop="rcmd">
              <el-radio v-model="good.rcmd" :label="true">是</el-radio>
              <el-radio v-model="good.rcmd" :label="false">否</el-radio>
            </el-form-item>
            <el-form-item label="优惠券" style="width:92%" prop="disc">
              <el-radio v-model="good.disc" :label="true">是</el-radio>
              <el-radio v-model="good.disc" :label="false">否</el-radio>
            </el-form-item>
            <el-form-item label="临保时长(单位为月)" style="width:92%" prop="shelf_life">
              <el-input-number v-model="good.shelf_life" controls-position="right" :min="1" :max="12" label="单位为月" />
            </el-form-item>
            <el-form-item label="商品图片" style="width:92%" prop="shop_img">
              <el-upload
                v-model="good.shop_img"
                action="https://jsonplaceholder.typicode.com/posts/"
                list-type="picture-card"
              >
                <i class="el-icon-plus" />
              </el-upload>
            </el-form-item>
            <el-form-item label="商品描述" style="width:92%" prop="shop_des">
              <el-input
                v-model="good.shop_des"
                type="textarea"
                :rows="3"
                placeholder="请输入内容"
              />
            </el-form-item>
          </el-form>
        </el-collapse-item>
      </el-collapse>
      <span slot="footer" class="dialog-footer">
        <el-button @click="btnCancel">取 消</el-button>
        <el-button type="primary" @click="btnOk">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getListData } from '@/api/shop/trade'
import { getUserList } from '@/api/order'
import { getClass, getCurrentUserId, addShopList, getCurrentClassData, editData, getCurrentShop } from '@/api/goods'
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    currentData: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      activeNames: ['1'],

      all_class: [], // 所有类
      shop_activity: [{ id: 1, activity_name: '秒杀活动' }, { id: 2, activity_name: '打折促销' }],
      shop_data: [], // 所有商铺
      user_list: [], // 所有用户
      new_user: [], // 根据商铺获取用户
      class_data: [], // 所有二级分类
      good: {
        id: '',
        shop_name: '', // 店铺名称
        shop_id: '', // 所属店铺id
        user_id: '', // 用户id
        good_name: '', // 商品名称
        types_of: '', // 商品类型(所属一级类型/二级类型)
        types_id: '', // 类别id
        cost_prc: '', // 成本价
        original_prc: '', // 原价
        in_stk: '', // 库存
        activity: '', // 活动(不参与为空,秒杀活动为spike,打折促销为disc_act)
        hot_cakes: '', // 是否热销
        rcmd: '', // 是否推荐
        sts: '', // 当前状态(false为下架,true为上架)
        disc: '', // 是否可以用优惠券
        shelf_life: '', // 保质期
        shop_img: [], // 商品图片
        shop_des: '', // 商品描述
        spike: { // 秒杀活动
          limit_number: '', // 限购
          prc_spike: ''// 秒杀价
        },
        disc_act: { // 打折促销
          frst_ordr: false, // 首单是否优惠
          sale_prc: ''// 促销价
        }
      }
    }
  },
  computed: {
    isAdd() {
      return !!this.good.id
    }
  },
  created() {
    this.getListData()
    this.getUserList()
    this.getClass()
  },
  methods: {
    // assignment 赋值
    assignment() {
      this.good = this.currentData
    },
    async changUser(id) {
      console.log(id, '34567456')
      const { data } = await getCurrentShop(id)
      const arr = data.filter(v => v.shop_name === this.good.shop_name)
      this.good.shop_id = arr[0].id
    },
    async changClass(id) {
      const { data } = await getCurrentClassData(id)
      // console.log(data, 23454565)
      this.good.types_of = data.cat_name
      // console.log(this.types_of, '类id4546789')
    },
    async changeShop(value) {
      const { data } = await getCurrentUserId(value)
      this.new_user = data
      console.log(data, '当前')
      // this.new_user = this.user_list.filter(v => v.id === data.userid)
      // // console.log(this.new_user)
    },
    btnCancel() {
      this.good = {
        id: '',
        shop_name: '', // 店铺名称
        shop_id: '', // 所属店铺id
        user_id: '', // 用户id
        good_name: '', // 商品名称
        types_of: '', // 商品类型(所属一级类型/二级类型)
        types_id: '', // 类别id
        cost_prc: '', // 成本价
        original_prc: '', // 原价
        in_stk: '', // 库存
        activity: '', // 活动(不参与为空,秒杀活动为spike,打折促销为disc_act)
        hot_cakes: '', // 是否热销
        rcmd: '', // 是否推荐
        sts: '', // 当前状态(false为下架,true为上架)
        disc: '', // 是否可以用优惠券
        shelf_life: '', // 保质期
        shop_img: [], // 商品图片
        shop_des: '', // 商品描述
        spike: { // 秒杀活动
          limit_number: '', // 限购
          prc_spike: ''// 秒杀价
        },
        disc_act: { // 打折促销
          frst_ordr: '', // 首单是否优惠
          sale_prc: ''// 促销价
        }
      }
      this.$emit('update')
      this.$emit('update:showDialog', false)
      this.$refs.addForm.resetFields()
    },
    async btnOk() {
      if (this.good.id) {
        await editData(this.good)
      } else {
        await addShopList(this.good)
      }
      this.$emit('update')
      this.$emit('update:showDialog', false)
    },
    async getListData() {
      const { data } = await getListData()
      var shop_arr = data.map(v => v.shop_name)
      this.shop_data = [...new Set(shop_arr)]
      console.log(this.shop_data, '商铺')
    },
    async getUserList() {
      const { data } = await getUserList()
      this.user_list = data
      console.log(data)
    },
    async getClass() {
      const { data } = await getClass()
      this.all_class = data
      this.class_data = data.filter(v => v.cat_level === 2)
    }
  }
}
</script>
<style lang="scss" scoped>
// 对话框样式
::v-deep .el-dialog__body{
    border-radius: 5px 5px 0 0;
    border: 1px solid rgb(212, 205, 205);
  }
</style>
